<template>
  <div id="bg">
    <div id="staff-form">
      <h1 class="font-bold">核销抽奖</h1>
      <IForm
        :list="list"
        :submit-text="'登 录'"
        :model-value="formValue"
        @submit="handleFormSubmit"
      />
    </div>
  </div>
</template>
  
<script setup name="WorkbenchPage">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { staffLogin } from '@/api/system/index'
import { showToast } from 'vant'
const route = useRoute()
// 引入路由
const router = useRouter()

const list = ref([
  {
    type: 'input',
    label: '',
    model: 'username',
    placeholder: '账号',
    rules: [{ required: true, message: '请输入账号' }]
  },
  {
    type: 'password',
    label: '',
    model: 'password',
    placeholder: '密码',
    rules: [{ required: true, message: '请输入密码' }]
  }
])

// 表单默认值
const formValue = reactive({
  username: '',
  password: ''
})

// 处理表单提交
const handleFormSubmit = async (formData) => {
  localStorage.removeItem('userInfo')
  const res = await staffLogin({
    username: formData.username,
    password: formData.password
  })
  if (res.code === 200) {
    localStorage.setItem('staffInfo', JSON.stringify(formData))
    localStorage.setItem('token', res.data.token)
    router.push({
      name: 'lottery',
      query: {
        phone: route.query.phone
      }
    })
  } else {
    showToast(res.msg)
  }
}

onMounted(() => {
  if (localStorage.getItem('staffInfo') != null && localStorage.getItem('token')) {
    const StaffInfo = JSON.parse(localStorage.getItem('staffInfo'))
    if (StaffInfo.username) {
      router.push({
        name: 'lottery',
        query: {
          phone: route.query.phone
        }
      })
    }
  }
})
</script>
  
<style lang="less">
#bg{
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  background: url(../../assets/img/c_bg2_less.png);
  background-size: 100% auto;
}
body {
  height: 100vh;
  background-size: 100% auto;
}
#staff-form {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px 30px 20px;
  /* 添加毛玻璃效果 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 1);
  h1 {
    font-size: 24px;
    text-align: center;
    padding: 25px 0 10px 0;
    color: #fff;
  }
}
</style>